<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件与循环</title>
</head>
<body>
    <!--v-if-->
    <div id="app-3">
        <p v-if="seen">
            现在你看到我了
        </p>
        <!-- Handlebars 模板 字符串模板中，如 Handlebars ，我们得像这样写一个条件块：-->
        <!--
        {{#if ok}}
        <h1>Yes</h1>
        {{/if}}
        -->
    </div>
    <!--v-for 指令可以绑定数组的数据来渲染一个项目列表 app4.todos.push({ text: '新项目' })-->
    <div id="app-4">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

    <div id="app-5">
        <div v-if="Math.random() > 0.5">
            Sorry
        </div>
        <div v-else>
            Not sorry
        </div>
    </div>

    <div id="app-6">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>


    <div id="app-7">
        <h1 v-show="ok">Hello!</h1>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        // v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
        //指令是带有 v- 前缀的特殊属性。
        var app3 = new Vue({
            el:"#app-3",
            data:{
                // seen:true 控制台输入app3.seen = false
                seen:false
            }
        })
        var app4  = new Vue({
            el:"#app-4",
            data:{
                todos:[
                    { text: '学习 JavaScript' },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ]
            }

        })
        // 这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。
        // 此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。


        //v-else
        var app5 = new Vue({
            el:"#app-5"
        });
        //v-else-if
        var app6 = new Vue({
            el: '#app-6',
            data: {
                type: 'C'
            }
        })

        //v-show
        // 我们也可以使用 v-show 指令来根据条件展示元素：
        var app7 = new Vue({
            el: '#app-7',
            data: {
                ok: false
            }
        })



    </script>
</body>
</html>